<template>
	<view class="writeList">
		<view class="mine-booking" v-if="orderList && orderList.length>0">
			<view class="mine-booking-title">我预约的</view>
			<view class="booking-info" v-for="(orderInfo,orderindex) in orderList" :key="orderindex"  >
				<view class="booking-left">
					<image :src="orderInfo.thumb_img" mode="aspectFill" class="booking-img"></image>
				</view>
				<view class="booking-right">
					<view class="booking-name">
					
					  <view class="name_left word-line-clamp1">
					  	{{orderInfo.businessName}}
					  </view>
					  <view class="tipsTextT" v-if="orderInfo.status == 0">
					  	未使用
					  </view>
					  <view class="tipsText" v-if="orderInfo.status == 1">
					  	已使用
					  </view>
					  <view class="tipsText" v-if="orderInfo.status == 2">
					  	已过期
					  </view>
					</view>
					<view class="booking-time">
						<text>预约时间：</text>
						<text>{{orderInfo.appointmentDate.split('.')[1]}}.{{orderInfo.appointmentDate.split('.')[2]}} {{orderInfo.startTime}}-{{orderInfo.endTime}}</text>
					</view>
					
					<view class="btnAll">
						<view class="see">
							<view @click="jumpDetil(orderInfo.businessId)">查看商户</view>
						</view>
						<view class="booking-btn" v-if="orderInfo.status == 0" @click="orderMed(orderInfo)">
							<view>出示二维码</view>
						</view>
						<!-- <view class="booking-btn" v-if="orderInfo.status == 1">
							<view class="comment">去评价</view>
						</view> -->
						<view class="qx" @click="cancelStatus(orderInfo)" v-if="orderInfo.status == 0">
							取消
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="item_kong" v-if="orderList.length==0">
			<image class="kong_img" src="../../static/order_kong.jpg"></image>
			<view class="kong_text">
				呜呜，此功能暂未开放
			</view>
		</view>
		
		
		<!--  取消预约弹窗 -->
		<view class="mask" v-if="maskFlag">
			<view class="cancel_modal">
				<view class="cancel_title">确认要取消预约么？</view>
				<view class="cancel_content">多次取消会影响你的下次预约哦。</view>
				<view class="cancel_btn">
					<view @click="cancelMed(0)">确认取消</view>
					<view @click="cancelMed(1)">不取消</view>
				</view>
			</view>
		</view>
		
		<customTabbar :bottomTabbar='bottomTabbar' :saleView='mineInfo.saleView' :curNav="2"></customTabbar>
	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import http from '@/utils/request/http.js';
	import {bookingOrderDetail , UpdateAppointmentStatus} from '../../apis/booking.js';
	export default {
		data() {
			return {
				bottomTabbar:0,
				mineInfo:{},
				isLastPage:false,
				orderList:[],
				currentPage:1,
				pageSize:10,
				maskFlag:false,
				orderId:0,
			}
		},
		components: {
			customTabbar,
		},
		onLoad() {
		},
		onShow() {
			uni.hideTabBar();
			this.currentPage = 1;
			this.orderList = [];
			this.isLastPage = false
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			// this.getOrderList();
		},
		onReachBottom() {
			console.log("cf")
			// if(!this.isLastPage){
			// 	this.currentPage++;
			// 	this.getOrderList();
			// }
		},
		methods: {
			cancelStatus(item){
				let that = this;
				that.orderId=item.id
				that.maskFlag = true;
			},
			cancelMed(i){
				let that = this;
				switch(i){
					case 0:
						// 确认取消
						UpdateAppointmentStatus({
							id:that.orderId,
							status:3
						}).then( cancel => {
							that.maskFlag = false;
							if(cancel.code == 200 ){
								uni.showToast({
									title:'取消成功',
									icon:'none',
									duration:2000
								});
								// setTimeout(function(){
								// 	uni.navigateBack({
								// 		delta:1
								// 	})
								// },1500)
							}else {
								uni.showToast({
									icon:"none",
									title:cancel.message
								})
							}
						})
					break;
					case 1:
						//  坚持训练
						that.maskFlag = false;
					break;
				}
			},
			jumpDetil(id) {
				let that = this;
				that.$navTo.navigateTo({
					id: 'Home-near-details',
					url: '../storeDetail/storeDetail?store_id=' + id,
					type: [2]
				})
			},
			getOrderList(){
				let that = this;
				let status = [0,1,2]; // 2 超时 3 取消 4
				const parms = {
					"page": that.currentPage,
					"pageSize": that.pageSize,
					'status':status
				}
				http.post('/api/store/v1/appointment/list',parms).then(res=> {
					that.isLastPage = res.data.is_last_page;
					if(res.data.data && res.data.data.length>0){
						that.orderList = that.orderList.concat(res.data.data)
					}
				})
			},
			orderMed(orderInfo){
				switch(orderInfo.status){
					case 0:
					this.jumpPageToQrcode(orderInfo);
					break;
					case 1:
					this.toComment(orderInfo);
					break;
				}
			},
			//  跳转展示小程序二维码
			jumpPageToQrcode(orderInfo){
				uni.navigateTo({
					url:'../orderResult/orderResult?orderId='+orderInfo.id
				})
			},
			toComment(orderInfo){
				uni.setStorageSync('thumbImg',orderInfo.thumb_img);
				uni.navigateTo({
					url:`../userComment/userComment?id=${orderInfo.id}&type=booking`
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	// 取消预约提示弹窗
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;top: 0;left: 0;
		background: rgba(0, 0, 0, 0.5);
		
		.cancel_modal {
			
			background-color: #FFFFFF;
			border-radius: 24rpx;
			padding: 50rpx 0;
			width: 80%;
			position: absolute;
			top:50%;left: 10%;
			margin-top: -236rpx;
			text-align: center;
			
			.cancel_title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
			
			.cancel_content {
				width: 60%;
				margin: 20rpx auto;
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 40rpx;
				white-space:pre-wrap;
				line-height: 40rpx;
			}
			
			.cancel_btn {
				display: flex;
				justify-content: center;
				
				view {
					width: 200rpx;
					height: 68rpx;
					line-height: 68rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
					font-weight: bolder;
					margin: 0 15rpx;
				}
				
				view:nth-child(1){
					border: 1rpx solid #666666;
					color: #666666;
				}
				
				view:nth-child(2){
					background: #FA6400;
					color: #333;
					border: 1rpx solid #FA6400;
				}
			}
		}
	}
	
	.writeList {
		padding-bottom: 230rpx;
	}
.mine-booking {
	padding: 30rpx;
	
	.mine-booking-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #141414;
	}
	
}
.booking-info {
	position: relative;
	padding: 30rpx 20rpx;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border-radius: 24rpx;
	margin-top: 20rpx;
	
	
	.booking-left {
		width: 180rpx;
		height: 180rpx;
		position: relative;
		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	.booking-right {
		position: relative;
		flex: 1;
		margin-left: 16rpx;
		.booking-name {
			font-size: 28rpx;
			font-weight: bolder;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 12rpx;
			display: flex;
			align-items: center;
			.name_left{
				flex: 1;
			}
			
			.tipsText{
				// position: absolute;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				// right: 30rpx;
				// top: 30rpx;
			}
			.tipsTextT{
				// position: absolute;
				font-weight: 400;
				font-size: 28rpx;
				color: #F43B00;
				// right: 30rpx;
				// top: 30rpx;
			}
		}
		.booking-time {
			margin-bottom: 28rpx;
			font-size: 24rpx;
			line-height: 33rpx;
			text:nth-child(1) {
				color: #999999;
			}
			text:nth-child(2) {
				color: #333;
			}
		}
		.btnAll{
			display: flex;
			align-items: center;
		}
		.see{
			display: flex;
			margin-right: 14rpx;
			view{
				width: 148rpx;
				height: 53rpx;
				border-radius: 28rpx;
				border: 1rpx solid #F43B00;
				font-size: 22rpx;
				color: #F43B00;
				text-align: center;
				line-height: 53rpx;
			}
		}
		.qx{
			width: 78rpx;
			height: 53rpx;
			border-radius: 28rpx;
			border: 1rpx solid #000;
			font-size: 22rpx;
			color: #000;
			text-align: center;
			line-height: 53rpx;
		}
		.booking-btn {
			display: flex;
			margin-right: 14rpx;
			view {
				width: 168rpx;
				height: 53rpx;
				line-height: 53rpx;
				border-radius: 28rpx;
				font-size: 22rpx;
				text-align: center;
				line-height: 53rpx;
			}
			view:nth-child(1){
				border: 1rpx solid #999999;
				color: #141414;
				margin-right: 12rpx;
			}
			view:nth-child(1){
				background: #FA6400;
				color: #fff;
				border: 1rpx solid #FA6400;
			}
			.comment {
				color: #fff!important;
				border: none!important;
				background-color: #FA6400;
			}
		}
	}
}
.item_kong {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 100rpx;

				.kong_img {
					width: 228rpx;
					height: 228rpx;
					border-radius: 50%;
				}

				.kong_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					width: 440rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
</style>
